<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.min.js"></script>
	</head>
	<body>
		<div id="app" class="box">
			<img class="img1" src="img/1.png"/>
			<img class="img2" src="img/2.png"/>
		</div>

	</body>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {},
			methods: {
			}
		})
	</script>
	<style>
		* {
			perspective: 800px;
		}

		img {
			width: 200px;
			position: absolute;
			top: 0;
			left: 0;
			animation: img1 3s linear infinite;
		}

		.box {
			position: relative;
			margin: 200px;
		}

		.img1 {
			z-index: 0;
			backface-visibility: hidden;
		}

		.img2 {
			z-index: -1;
		}

		@keyframes img1 {
			from {
				transform: rotateY(0);
			}

			to {
				transform: rotateY(360deg);
			}
		}
	</style>
</html>
